<template>
  <div>
    <hr>
    <h4 class="form-header h4">基本信息</h4>
    <div style="float: left">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" style="font-weight: bolder">
        <el-form-item label="部门名称" prop="deptName" >
          <el-input
              size="small"
              v-model="queryParams.name"
              placeholder="请输入部门名称"
              clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div style="clear: left">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
          >新增
          </el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
    </div>

    <div>
      <h4>部门信息</h4>
      <el-table
          v-loading="loading"
          :data="deptList"
      >
        <el-table-column prop="id" label="编号" width="260"></el-table-column>
        <el-table-column prop="name" label="部门名称" width="260"></el-table-column>
        <el-table-column prop="description" label="部门描述" width="260"></el-table-column>
        <el-table-column label="创建时间" align="center" prop="createdAt" width="200"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
            >修改
            </el-button>
            <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          small
          background
          layout="prev, pager, next"
          :page-size="page.size"
          :total="page.total"
          :page-count="page.pages"
          :current-page="page.pageNo"
          @current-change="onPage"
      >
      </el-pagination>
    </div>


    <div>
      <!-- 添加或修改部门对话框 -->
      <el-dialog :title="title" :visible.sync="dialogFormVisible" :show-close="false" :close-on-press-escape="false" :close-on-click-modal="false">
        <el-form :model="form" label-width="80px" :rules="rules" ref="ruleForm">
          <el-form-item label="部门名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="部门描述" :label-width="formLabelWidth">
            <el-input v-model="form.description" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeDialogFormVisible">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {axiosDelete, axiosGet, axiosPost, axiosPut} from "@/api";

export default {
  name: "DepartmentsView",
  data() {
    return {
      form: {
        id:null,
        name: null,
        description: null
      },
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
        ],
      },
      title: "",
      dialogFormVisible: false,
      deptList: [],
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      //分页
      page: {
        size:0,
        pageNo: 1,
        pages: 0,
        total: 0
      },
      queryParams: {
        name: null
      }
    }
  },
  methods: {
    handleDelete(row){
      this.$confirm('确删除'+row.name+"部门吗？", '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axiosDelete("departments/"+row.id)
            .then(res=>{
              res.code===200? this.$message.success(res.mess):this.$message.error(res.mess)
              this.getList();
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.form.id!=null){
            //修改
            axiosPut("departments",this.form)
                .then(res=>{
                  res.code===200? this.$message.success(res.mess):this.$message.error(res.mess)
                  this.getList();
                })
          }else{
            //添加
            axiosPost("departments",this.form)
                .then(res=>{
                  console.log(res)
                  res.code===200? this.$message.success(res.mess):this.$message.error(res.mess)
                  this.getList();
                })
          }
          this.closeDialogFormVisible()
        }
      });
    },
    handleUpdate(row){
      this.form=row
      this.title="修改部门"
      this.dialogFormVisible=true;
    },
    handleAdd(){
      this.title="添加部门"
      this.dialogFormVisible=true;
    },
    closeDialogFormVisible() {
      this.form = {
        id:null,
        name: null,
        description: null
      }
      this.dialogFormVisible=false
    },
    //分页
    onPage(current) {
      this.page.pageNo = current
      this.getList()
    },
    //搜索
    handleQuery() {
      this.page.pageNo = 1
      this.getList()
    },
    getList() {
      this.loading = true;
      axiosGet("/departments", {name: this.queryParams.name, pageNum: this.page.pageNo})
          .then(res => {
            console.log(res)
            this.deptList = res.data.records
            this.page.pageNo = res.data.current
            this.page.pages = res.data.pages
            this.page.total = res.data.total
            this.page.size = res.data.size
            this.loading = false;
          })
    },
    //重置
    resetQuery() {
      this.queryParams = {
        ame: null
      }
      this.getList();
    }

  },
  mounted() {
    this.getList()
  },
}
</script>

<style scoped>

</style>